<template>
  <div class="login subchild" id="body">
    <van-icon
      class="goback"
      name="cross"
      color="rgb(157, 157, 157)"
      size="30px"
      @click="goindex"
    />

    <van-tabs
      color="#ee0a24"
      v-model="active"
      title-active-color
      animated
      scrollspy
      id="login"
      line-width="10px"
      line-height="3px"
    >
      <van-tab title="密码登录" name="1">
        <van-form @submit="onSubmit">
          <van-field
            v-model="login.usernames"
            name="phone"
            label="账号"
            placeholder="账号或手机号"
            :rules="[{ required: true, message: '请填写账号' }]"
          />
          <van-field
            v-model="login.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div class="passlogin">
            <van-button block type="info" native-type="submit">登录</van-button>
            <van-button block type="info" class="zc" @click="goregister"
              >注册</van-button
            >
          </div>
        </van-form>
      </van-tab>
      <van-tab title="验证码登录" name="2">
        <van-form>
          <van-field
            v-model="obj.phone"
            name="phone"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
            v-model="obj.captcha"
            type="captcha"
            name="captcha"
            label="验证码"
            placeholder="验证码"
          >
            <template #button>
              <van-button size="small" v-if="flag" type="primary" @click="send"
                >发送验证码</van-button
              >
              <van-button
                disabled
                size="small"
                v-else
                style="width: 90px"
                type="warning"
                >{{ txt }}</van-button
              >
            </template>
          </van-field>
          <div class="login">
            <van-button
              block
              type="warning"
              native-type="submit"
              @click="onSubmit1"
              class="walogin"
              >登录</van-button
            >
          </div>
        </van-form>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from "axios";

import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);

export default {
  data() {
    return {
      login: {},
      active: "1",
      obj: {},
      count: 60,
      flag: true,
      timer: null,
      txt: "发送验证码",
    };
  },
  methods: {
    goindex() {
      this.$router.push({name:"listen"});
    },
    goregister() {
      this.$router.push({ name: "register" });
    },
    onSubmit(value) {
      axios
        .post("http://8.136.12.226:3000/users/login/dl", this.login)
        .then((res) => {
          console.log(res.data.token);
          if (res.data.type == 1) {
            Toast("登录成功");
            localStorage.setItem("token", res.data.token);
            localStorage.setItem("username",this.login.usernames)
            this.$router.push({ name: "mine" });
          } else {
            Toast("账号或密码错误");
          }
        });
    },

    send() {
      this.timer = setInterval(() => {
        console.log(this.flag, this.count);
        this.count--;
        this.flag = false;
        this.txt = this.count + "s";

        if (this.count <= 0) {
          clearInterval(this.timer);
          this.timer = null;
          this.flag = true;
          this.count = 60;
        }
      }, 1000);

      axios
        .get("http://47.104.209.44:3333/captcha/sent?", {
          params: {
            phone: this.obj.phone,
          },
        })
        .then((res) => {
          if (res.data.data) {
            Toast("验证码发送成功");
          } else {
            Toast("获取验证码失败");
          }
        });
    },
    onSubmit1(value) {
      axios
        .get("http://47.104.209.44:3333/captcha/verify?", { params: this.obj })
        .then((res) => {
          console.log(res);

          if (res.data.data) {
            Toast("登录成功");
            localStorage.setItem("phone", this.obj.phone);
          
            this.$router.push({ name: "mine" });
          } else {
            Toast("验证码错误");
          }
        });
    },
    gotoRegister() {
      this.$router.push({ name: "register" });
    },
  },
};
</script>


<style lang="scss" scoped>
::v-deep .van-tab--active {
  .van-tab__text {
    color: #000 !important;
  }
}

#login {
  margin-top: 46px;
}
#body {
  position: relative;
  overflow: hidden;
  height: 100% !important;
  width: 100%;
  background-color: #fff;
  background: url("../../assets/images/background.jpg");
  background-position: center center;
}
.login {
  width: 50%;
  border-radius: 10px;
  text-align: center;
  display: flex;
  margin-top: 30px;
  margin: auto;
}
::v-deep .van-button--info {
  width: 40%;
  // margin-left: 20%;
  border-radius: 10px;
  margin-top: 30px;
}
// ::v-deep .van-tabs__nav--line{
//     padding-bottom: 30px;
// }
//
::v-deep .van-tab__text--ellipsis {
  font-size: 16px;
  font-weight: 600;
  color: rgb(157, 157, 157);
}

.passlogin {
  display: flex;
  justify-content: space-around;
}

.zc {
  background-color: rgb(249, 78, 78);
  border: none;
}
.walogin {
  background-color: rgb(249, 78, 78);
  border: none;
  border-radius: 10px;
  margin-top: 30px;
}
::v-deep .van-field {
  margin-top: 35px;
}

.goback {
  position: absolute;
  top: 3%;
  right: 5%;
}
</style>

